<template>
    <div class="app-container">
        <el-table border :data="tableData" style="width: 100%" header-align="center">
            <el-table-column prop="ask.title" label="留言标题"></el-table-column>
            <el-table-column prop="ask.content" label="留言内容"></el-table-column>
            <el-table-column prop="ask.nickname" label="留言人" width="120px"></el-table-column>
            <el-table-column prop="ask.liuyanrendanwei" label="留言人科室" width="180px"></el-table-column>
            <el-table-column prop="ask.shifouhuifu" label="是否回复" width="100px">
                <template slot-scope="scope">
                    <span style="color:#fc0000;" v-if="scope.row.ask.shifouhuifu === '未回复'">未回复</span>
                    <span style="color:#11b95c;"  v-if="scope.row.ask.shifouhuifu === '已回复'">已回复</span>
                </template>
            </el-table-column>
            <el-table-column prop="ask.liuyanshijian" label="留言时间" width="100px"></el-table-column>
            <el-table-column prop="ask.shifouyinsi" label="是否隐私" width="100px">
                <template slot-scope="scope">
                    <span v-if="scope.row.ask.shifouyinsi === 1">是</span>
                    <span v-if="scope.row.ask.shifouyinsi === 0">否</span>
                </template>
            </el-table-column>
            <el-table-column label="往期回复" width="110px">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="lookDetail(scope.row.replylist)">往期回复</el-button>
                </template>    
            </el-table-column>
            <el-table-column label="操作" width="100px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="reply(scope.row.ask)">回复</el-button>
                </template>    
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top:20px"
            background
            @size-change="handleChangeSize"
            @current-change="handleSizeChange"
            :current-page="1"
            :page-sizes="[16, 40, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            >
        </el-pagination>

        <!----回复弹窗----->
        <el-dialog title="回复" :visible.sync="dialogVisible" width="500px" @close="closeDialog">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="回复内容">
                    <el-input type="textarea" :rows="12" v-model="form.content"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="cancle">取消</el-button>
                </el-form-item>
            </el-form>   
        </el-dialog> 
        
        <!------查看回复-------->
        <el-dialog title="回复详情" :visible.sync="dialogxiangqingVisible" width="800px">
            <el-table border :data="tableDatareply" style="width: 100%">
                <el-table-column prop="bumen" label="回复部门"></el-table-column>
                <el-table-column prop="huifuren" label="回复人"></el-table-column>
                <el-table-column prop="replycontent" label="回复内容"></el-table-column>
                <el-table-column prop="huifushijian" label="回复时间"></el-table-column>
            </el-table>
        </el-dialog>    
    </div>    
</template> 
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<script>
import { getToken } from "@/utils/auth"; 
import { getAllNote, replyNote } from "@/api/yxzx/email";
export default {
    data() {
        return {
            loading: true,
            tableData: [],
            pageindex: 1,
            pagesize: 10,
            total: 0,
            dialogVisible:false,
            form: {},
            askid: '',
            dialogxiangqingVisible:false,
            tableDatareply: [],
        }
    },
    created() {
        this.getNoedata()
    }, 
    methods: {
        // 查询所有留言
        getNoedata(){
            getAllNote(this.pageindex,this.pagesize).then((res) => {
                this.tableData = res.resultContent.AskList
                this.total = res.resultContent.PageInfo.recordCount
            });
        },
        handleSizeChange(val) {
            this.pageindex = val;
            this.getNoedata()
        },
        handleChangeSize(val){
            this.pagesize = val;
            this.getNoedata()
        },
        reply(val){
            this.askid = val.askid
            this.dialogVisible = true
        },
        lookDetail(val){
            this.tableDatareply = val
            this.dialogxiangqingVisible = true
        },
        onSubmit(){
            if(!this.form.content || this.form.content==''){
                this.$message.error('请填写回复内容！');
                return
            }
            replyNote(this.askid,this.form.content).then((res) => {
                console.log(res)
                if(res.result == '1'){
                    this.$message({
                        message: res.resultContent,
                        type: 'success'
                    });
                    this.getNoedata()
                    this.form.content = ''
                    this.dialogVisible = false
                }
            });
        },
        cancle(){
            this.form.content = ''
            this.dialogVisible = false
        },
        closeDialog(){
            this.form.content = ''
        }
    } 
} 
</script> 